function Magnifier(){
  this.sbox = document.querySelector(".smallImg")
  this.bbox = document.querySelector(".largeImg")
  this.ospan = document.querySelector(".smallImg span")
  this.bimg = document.querySelector(".largeImg img")
  this.addEvent()
}
Magnifier.prototype.addEvent = function(){
  var that =this
  this.sbox.onmouseover = function(){
      that.show()
  }
  this.sbox.onmouseout = function (){
      that.hide()
  }
  this.sbox.onmousemove = function(eve){
      var e = eve || window.event
      that.move(e)
  }
}
Magnifier.prototype.show =function(){
  this.bbox.style.display="block"
  this.ospan.style.display="block"
  this.ospan.style.width=(this.bbox.offsetWidth/this.bimg.offsetWidth)*this.sbox.offsetWidth+"px"
  this.ospan.style.height=(this.bbox.offsetHeight/this.bimg.offsetHeight)*this.sbox.offsetHeight+"px"
}
Magnifier.prototype.hide =function(){
  this.bbox.style.display="none"
  this.ospan.style.display="none"
}
Magnifier.prototype.move =function(e){
  var l = e.clientX-this.sbox.offsetLeft-this.ospan.offsetWidth/2;
  var t = e.clientY-this.sbox.offsetTop-this.ospan.offsetHeight/2;
  if(l<0) l=0
  if(t<0) t=0
  if(l>this.sbox.offsetWidth-this.ospan.offsetWidth) l=this.bbox.offsetWidth-this.ospan.offsetWidth
  if(t>this.sbox.offsetHeight-this.ospan.offsetHeight) t=this.bbox.offsetHeight-this.ospan.offsetHeight
  this.ospan.style.left = l+"px"
  this.ospan.style.top = t+"px"

  var x = l/(this.sbox.offsetWidth-this.ospan.offsetWidth)
  var y = t/(this.sbox.offsetHeight-this.ospan.offsetHeight)

  this.bimg.style.left = x * -Math.abs(this.bimg.offsetWidth-this.bbox.offsetWidth)+"px"
  this.bimg.style.top =  y * -Math.abs(this.bimg.offsetHeight-this.bbox.offsetHeight)+"px"
}